<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>我的旅遊</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="css/sm.css">
	<link rel="stylesheet" href="css/sm-extend.min.css">
	<link href="css/animate-animo.css" rel="stylesheet" type="text/css">
	<style type="text/css">
      #container{
        height: 100%;
        margin: 0px;
        font:12px Arial;
      }
      .taiwan{
      	border: solid 1px red;
      	color: red;
      	float: left;
      	width: 50px;
      	background-color: rgba(255,0,0,0.1)
      }
      #menu-icon {
      	float: left;
      }
      h1 {
      	color: #ff0
      }

      .icon {
      	color:#fff;
      }
    </style>
</head>
<body>

	<div class="page-group">
		<!-- 你的html代码 -->
		<div class="page">
			<header class="bar bar-nav">
				<a id="menu-icon" class="icon icon-menu open-popup"></a>
				<h1 class="title" id="title">易游~</h1>
			</header>
			<div class="bar bar-header-secondary">
				<div class="searchbar">
					<a class="searchbar-cancel">取消</a>
					<div class="search-input">
						<label class="icon icon-search" for="search"></label>
						<input type="search" id='search' placeholder='搜索景點或商鋪'/>
					</div>
				</div>
			</div>
			<div class="content">
				<!-- 这里是页面内容区 -->
				<div id="container" tabindex="0"></div>
			</div>
		</div>
		<!-- About Popup -->
		<div class="popup popup-about">
			<div class="content-block">
				<p>About</p>
				<p>
					<a href="#" class="close-popup">Close popup</a>
				</p>
				<p>Lorem ipsum dolor ...</p>
			</div>
		</div>
		<!-- Services Popup -->
		<div class="popup popup-services">
			<div class="content-block">
				<p>Services</p>
				<p>
					<a href="#" class="close-popup">Close popup</a>
				</p>
				<p>Lorem ipsum dolor ...</p>
			</div>
		</div>
	</div>

	<script src="http://webapi.amap.com/js/marker.js"></script>
	<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
	<script type="text/javascript">

        var mapObj = new AMap.Map('container',{resizeEnable: false,zoom:1});
        var markers = []; //province见Demo引用的JS文件
        for (var i = 0; i < provinces.length; i += 1) {
    			var marker;
    			if (provinces[i].type === 0) {
    				var icon = new AMap.Icon({
    					image: 'http://vdata.amap.com/icons/b18/1/2.png',
    					size: new AMap.Size(24, 24)
    				});
    				marker = new AMap.Marker({
    					icon: icon,
    					position: provinces[i].center.split(','),
    					offset: new AMap.Pixel(-12,-12),
    					zIndex: 101,
    					title: provinces[i].name,
    					map: mapObj
    				});
    			} else {
    				marker = new AMap.Marker({
    					position: provinces[i].center.split(','),
    					title: provinces[i].name,
    					map: mapObj
    				});
            if (provinces[i].type === 2) {
      				var content= "<div class = 'taiwan'>宝岛台湾</div>";
      				baodao = new AMap.Marker({
      					content: content,
      					position: provinces[i].center.split(','),
      					title: provinces[i].name,
      					offset: new AMap.Pixel(0,0),
      					map: mapObj
      				});
            }
    			}
    			markers.push(marker);
    		}
			  mapObj.setFitView();
    </script>
	<script type='text/javascript' src='js/jquery-2.2.0.min.js' charset='utf-8'></script>
	<script src="js/animo.js" type="text/javascript"></script>
	<script type='text/javascript' src='js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='js/sm-extend.min.js' charset='utf-8'></script>
	<script>
		$(document).ready(function(){
 			$("#title").click(function(){
    			$('#title').animo( { animation: 'tada' } );
  			});
		});
		$.init();
	</script>
</body>
</html>